<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>filter 过滤器</h2>
    <p>水---过滤器（小米过滤器）--->饮用水</p>
    <p>A状态---filter--->B状态</p>
    <hr>
    <h2>时间戳展示</h2>
    <!--可以多个过滤器一起使用 把前一个的输出作为下一个的输入-->
    <p>{{ addTime | formatTimestampToDateString(2) }}</p>
    <p>{{ addTime1 | formatTimestampToDateString }}</p>
    <hr>
    <p>{{ dateString1 | dateStringToTimeStamp }}</p>
    <p>{{ dateString1 | dateStringToTimeStamp(2) | formatTimestampToDateString }}</p>

    <p>过滤器 是借鉴Linux 操作系统里面的 管道 的思想进行实现的。</p>
    <p>过滤器有的人也叫做 变量调节器 ，这个主要是 PHP程序猿里面有一个 smarty 模板引擎里面使用的。</p>
    <p>linux:  ps aux | grep nginx</p>
    <p>linux:  netstat -tunple | grep 80</p>

    <pre>
        [root@nk-tx ~]# ps axu | grep nginx
root      1815  0.0  0.1 129280  1264 ?        Ss   Apr20   0:00 nginx: master process /www/server/nginx/sbin/nginx -c /www/server/nginx/conf/nginx.conf
www       1816  0.0  0.6 153288  6196 ?        S    Apr20   0:29 nginx: worker process
www       1817  0.0  0.1 131236  1604 ?        S    Apr20   0:05 nginx: cache manager process
root      8856  0.0  0.0 112812   964 pts/0    R+   14:20   0:00 grep --color=auto nginx
[root@nk-tx ~]# netstat -tunple |grep 80
tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      0          19462      1815/nginx: master

    </pre>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            addTime: 1652076228,// 时间戳数据
            addTime1: 1652086228,// 时间戳数据
            dateString1: '2022-5-6 14:16:07',
        },
        /*s复数*/
        filters: {
            formatTimestampToDateString(input, type = 1) {
                let date = new Date(input * 1000);
                if (type == 2) {
                    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

                } else {
                    return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                }
            },
            /*把字符串转换为时间戳*/
            dateStringToTimeStamp(input, type = 1) {
                /*基于毫秒*/
                if (type == 2) {
                    // 返回 s
                    return parseInt(new Date(input).getTime() / 1000);

                } else {
                    return new Date(input).getTime();
                }

            }
        }
    })
</script>

</html>
